<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="author" content="" />
<title>入侵植物检测</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/search.css" type="text/css" />
<link rel="stylesheet" href="css/pi_61520ae.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="font/iconfont.js"></script>



<style>
[v-cloak] {
	display: none;
} 
</style>
 
 <style type="text/css">

.form-control{
border:0px solid #fff;
height: 50px;
color: #fff;
background-color: rgba(128,121,121,.0);

}
.span{
 position:absolute;
 text-align:center; 
 width:284px;
 height:22px; 
 line-height:22px; 
 left:0px; 
 color:#fff;
 bottom:0px;
 background-color: rgba(128,121,121,.0);
}
.input-group .form-control:first-child{box-shadow: none;}
 </style>
</head>
<body class="lybg">

 	<div id="search" v-cloak>
	
<!-- 	   标题模块 -->
		<div class="big">
			<div id="header">
				<div class="logo">
					<a href="" target="_blank"><img class="logoimg"
						src="images/logo.png" alt="" /></a>
				</div>
				<div class="title" >入侵植物检测</div>
			</div>
		</div>

		<div class="clear"></div>



<div class="main_body" >
<form action="" id="userface">
<!-- 图片上传框 -->
<div class="search">
   
 <div class="search_btn">
   <div class="input-group" id="fist">
       <input type="text" class="form-control" style="border: none">
  <div class="input-group-btn">
       <a>
         <input type="file"  name="file" id="file" onchange="loading(this)" accept=".jpg" class="required" style="display: none;border: none"/>
       </a>
       <a>
       <img class="form-control_img" id="img" src="images/xiangji.png">
       </a>
       <div class="st_tips"  style="display: none;">上传图片&nbsp;/&nbsp;搜索相关信息</div>
       
  </div>
   
   <div class="input-group-btn">
      <img alt="" src="images/shuxian.png" class="input-group-btn_img" >
  </div>
   <div class="input-group-btn" >
       <a><img alt="" src="images/sousou.png" style="width: 25px;height: 25px;margin: 0 15 0 10;"></a>
  </div>

</div>
  </div>
     <div id="loading" class="loading" v-if="loading">
     <div style="margin-top: 80px;margin-left: 200px">
     <img alt="" src="images/uploading.gif" ><span style="padding-left: 10px;">正在识别中，请稍候...</span>
    </div>
</div>
 </div>
 </form>
    
<!--  图片示例    -->
<div class="tup1" style="">
 	<div class="panel-heading" style="padding: 0px 0px;color: #fff" >
			应用说明：
			<h4 style="color: #fff;font-size: 15px;line-height:20px;">
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp点击下列示例图片或自行上传图片进行入侵物种识别。
			<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注：目前仅支持13种植物类别。
			</h4> 
	       <hr style="margin-top: 10px;margin-bottom: 10px">		   
		</div>
    <div class="row">
 <div class="col-xs-6 col-md-3" style="margin-top: 10px;margin-left: 60px;padding: 0 0 0 0;object-fit:cover;">
    <a  class="thumbnail"style="height: 230px;padding: 0px;">
    <span class="span" style="width: 205px">含羞草</span>
      <img src="images/hxc.jpg"  id="img1" onclick="upload(this,0)" style="height: 100%;width: 100%;object-fit:cover;">
      
    </a>
  </div>
  
    <div class="col-xs-6 col-md-3"style="margin-top: 10px;margin-left: 40px;padding: 0 0 0 0;">
    <a  class="thumbnail" style="height: 230px;padding: 0px;">
    <span class="span" style="width: 205px">三叶鬼针草</span>
      <img src="images/syc.jpg" onclick="upload(this,1)" id="img2" style="height: 100%;width: 100%;object-fit:cover;">
    </a>
  </div>
    <div class="col-xs-6 col-md-3"style="margin-top: 10px;margin-left: 40px;padding: 0 0 0 0;">
    <a  class="thumbnail" style="height: 230px;padding: 0px;">
    <span class="span" style="width: 205px">五爪金龙</span>
      <img src="images/wzjl.jpg" onclick="upload(this,2)" id="img3" style="height: 100%;width: 100%;object-fit:cover;">
    </a>
  </div>
  
</div>
 </div>  
 
    
 <div class="tup2" >
 	<div class="panel-heading1">
				图片详情
		</div>
    <div class="row">
  <div class="col-xs-6 col-md-4" style="padding-top: 10px;padding-left: 40px;">
    <a  class="thumbnail"style="height: 400px;padding: 0px;">
      <img src="" class="img_tup" id="img_tup" alt="含羞草"style="height: 100%;width: 100%;object-fit:cover;">
    </a>
  </div>
  
  <div class="col-xs-6 col-md-8">
  		<div style="overflow:hidden;width: 100%;height: 180px" v-for="item in list" v-if="type==0" class="shibiele">
  		 <div style="float: left;width: 480px;color: white;margin-top: 15px; cursor: pointer;" >
	 	     <div>名称：{{item.名称}}</div>
		     <div>概率：{{item.概率 | fix2}}</div>
		     <div>描述：{{item.描述 | emptyV}}</div>
		     <div>学名：{{item.学名 | emptyV}}</div>
		     <div>常出现地区：{{item.常出现地区 | emptyV}}</div>
		     <div>常出现海拔：{{item.常出现海拔 | emptyV}}</div>
		     <div>常见生境类型：{{item.常见生境类型 | emptyV}}</div>
		     <div>主要伴生种类：{{item.主要伴生种类 | emptyV}}</div> 
     	</div>
     	 <div style="float: left;width:270px;height: 180px;color: white;margin-top: 15px;">
     	 <a  class="thumbnail" style="padding: 0px;">
     	     <img :src= "imgurl+item.图片路径"  style="width: 100%;object-fit:cover;height: 160px;">
     	     </a>
     	</div>
  		</div>
  		
	  	<div style="overflow:hidden;width: 100%;height: 180px;display: none" class="wushibie">
	  	<div style="float: left;width: 480px;color: white;margin-top: 15px; cursor: pointer;" >
  		  <div class="shibie"></div>
  		 </div>
  		</div>
  		
  		
  		<div style="overflow:hidden;width: 100%;height: 180px" v-for="item in staticlist" v-if="type==1" class="shibie1">
  		 <div style="float: left;width: 480px;color: white;margin-top: 15px; cursor: pointer;" >
	 	     <div>名称：{{item.名称}}</div>
		     <div>概率：{{item.概率}}</div>
		     <div>描述：{{item.描述}}</div>
		     <div>学名：{{item.学名}}</div>
		     <div>常出现地区：{{item.常出现地区}}</div>
		     <div>常出现海拔：{{item.常出现海拔}}</div>
		     <div>常见生境类型：{{item.常见生境类型}}</div>
		     <div>主要伴生种类：{{item.主要伴生种类}}</div> 
     	</div>
     <div style="float: left;width:270px;height: 180px;color: white;margin-top: 15px;">
     	 <a  class="thumbnail" style="padding: 0px;">
     	     <img :src=  "'http://47.106.96.255:5000/static/images/'+item.名称+ '.jpg'"  style="width: 100%;object-fit:cover;height: 160px;">
     	     </a>
     	</div>
  		</div>
        
     <div style="overflow:hidden;width: 100%;height: 180px" v-for="item in staticlist" v-if="type==1" class="shibie2">
  		 <div style="float: left;width: 480px;color: white;margin-top: 15px; cursor: pointer;" class="mlage" >

     	</div>
  		</div>
  </div>
  
</div>
 </div>
 
 </div>
    
    
 </div>
<!--  </form> -->
    
    
    
		<div id="bgfooter">
			<div id="footer">
				<div class="copyright">
					<div class="copyright1">
						<a href="" title=""><img class="logoimg" src="images/logo.png"
							alt="" alt="" /></a>
					</div>
<!-- 					<div class="copyright2" style="width: 350px"> -->
<!-- 						Copyright@2018 <a href="http://www.miit.gov.cn/" rel="nofollow" -->
<!-- 							target="_blank">滇ICP备17010305号-1</a> <br /> -->
<!-- 					</div> -->
					<div class="copyright2" style="width: 350px">
						Copyright@2018 滇ICP备17010305号-1<br />
					</div>
				</div>
				<div class="subnav">
					<div class="subnav1">
						<strong><a href="" title="公司平台">公司平台</a></strong>
						<span><a 
							href="http://www.datashang.com/shs_web/index.html" title="数熵工厂" target="_blank">数熵工厂</a></span>
						<span><a 
							href="http://study.weihengtech.com/qjpt/" title="全景展览馆" target="_blank">全景展览馆</a></span>
							<span><a 
							href="http://nxf.ynmaker.com/index.php?s=/home/enterprise/plantaddr.html" title="中草药种植推荐" target="_blank">中草药种植推荐</a></span>
							<span><a 
							href="http://nxf.ynmaker.com/index.php?s=/home/enterprise/plantcalculate.html" title="中草药种植成本计算" target="_blank">中草药种植成本计算</a></span>
							<span><a 
							href="http://www.datashang.com/shs_web/search.html" title="入侵物种检测" target="_blank">入侵物种检测</a></span>
					</div>
					<div class="subnav2">
						<strong><a href="" title="友情链接">友情链接</a></strong><span><a
							href="http://www.ynmaker.com/" title="唯恒农业" target="_blank">唯恒农业</a></span><span><a
							href="http://study.weihengtech.com" title="唯恒学院" target="_blank">唯恒学院</a></span><span><a 
							href="http://scrc.ynmaker.com/" title="三产融创平台" target="_blank">三产融创平台</a></span><span><a
							href="www.weihengtech.com " title="科技成果转化中心" target="_blank">科技成果转化中心</a></span><span><a 
							href="http://www.czhiwu.com/index.php" title="云药技术服务中心" target="_blank">云药技术服务中心</a></span>
							
					</div>
		
					<div class="subnav5">
						<strong><a href="" title="服务支持">关于我们</a></strong><span><a
							href="" title="公司介绍">公司介绍</a></span><span><a 
							href="" title="联系我们">联系我们</a></span>
					</div>
					<div class="subnav5">
						<div style="width: 120;height: 120px;">
						  <img alt="" src="images/xiaochenxu.jpg"style="width: 120;height: 120px;">
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/vue2.0/vue.js"></script>
	<script src="js/axios/axios.min.js"></script>
	<script src="js/func/axiosconfig.js"></script>
	<script src="js/func/search.js"></script>
<script type="text/javascript">
function loading(input){
	search.loading = true
// 	var imgsrc = document.getElementById("file").value;

// 	    $(".img_tup").attr('src',imgsrc);
  var r= new FileReader();
  f=document.getElementById('file').files[0];
   
  r.readAsDataURL(f);
  r.onload=function (e) {
    document.getElementById('img_tup').src=this.result;
  };

		
		$('.tup1').css('display','none');
		var form=document.getElementById("userface");
	    var fd =new FormData(form);
	 	 axios({
	 		  method: 'post',
	 		  url: 'http://47.106.96.255:5000/upload',
	 		  data:fd,
	 		  responseType:'json',
	 		  timeout: 10000,
	 	}).then(function(res){
	 		console.debug(res.data.status);
	 		search.type=0;
	 		if(res.data.status=='201'){
	 			debugger
	 			search.loading =false
	 			$('.shibiele').css('display','none');
	 			$('.shibiele1').css('display','none');
	 			$('.shibiele2').css('display','none');
	 			$('.tup2').css('display','block');
	 			$('.wushibie').css('display','block');
	 			$(".shibie").html(res.data.result);
	 		}else{
	 			debugger
	 			search.loading =false 
		 		search.list = res.data.result;
		 	    console.debug(res.data.result.status);
		 		$('.tup2').css('display','block');
	 		}	
	 		$("#file").val(""); 
	 	}).catch(function(error){
	 		
	 		debugger
	 		var str = error +'';
	 		if(str.search('timeout')!=-1){
	 			window.location.href="search2.html"; 
	 		}else{
	 			window.location.href="search3.html"; 
	 		}
	 	 	$("#file").val("");  
	 		
	 	});
	 	$("#file").val("");  
}

function upload(e,c){
	search.loading = true
	$('.tup1').css('display','none');
	search.pushData(c)
	 var t= setTimeout(function(){
			var imgsrc = $(e).attr('src')
		    $(".img_tup").attr('src',imgsrc);
		 	search.loading =false
			
		 	$('.tup2').css('display','block');
	 }, 2000);

}



$(".name").mouseover(function(){
	  $(".st_tips").css("display","block");
	});
	
$(".name").mouseleave(function(){
	  $(".st_tips").css("display","none");
	});
$(".st_tips").mouseleave(function(){
	  $(".st_tips").css("display","block");
	});
	
	
	
$(document).ready(function(){
	  $("#file").click(function(){
	  });
	  $("#img").click(function(){
	     $("#file").trigger("click");
	  });

	});
	

</script>
</body>
</html>